// src/pages/task/PlanManage.vue
<template>
	<div class="plan-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>检验计划制定</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增计划</el-button>
				</div>
			</template>

			<el-table :data="planList" border stripe>
				<el-table-column prop="code" label="计划编号" width="140" />
				<el-table-column prop="standard" label="质检标准" />
				<el-table-column prop="start" label="开始日期" width="120" />
				<el-table-column prop="end" label="结束日期" width="120" />
				<el-table-column prop="frequency" label="频率" width="100" />
				<el-table-column prop="person" label="负责人" width="120" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="计划编号">
					<el-input v-model="form.code" />
				</el-form-item>
				<el-form-item label="质检标准">
					<el-input v-model="form.standard" />
				</el-form-item>
				<el-form-item label="开始日期">
					<el-date-picker v-model="form.start" type="date" style="width: 100%" />
				</el-form-item>
				<el-form-item label="结束日期">
					<el-date-picker v-model="form.end" type="date" style="width: 100%" />
				</el-form-item>
				<el-form-item label="频率">
					<el-select v-model="form.frequency">
						<el-option label="每天" value="每天" />
						<el-option label="每周" value="每周" />
						<el-option label="每月" value="每月" />
					</el-select>
				</el-form-item>
				<el-form-item label="负责人">
					<el-input v-model="form.person" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref } from 'vue'
import dayjs from 'dayjs'

export default {
	setup() {
		const planList = ref([
			{
				code: 'PLAN001',
				standard: '混凝土强度检测',
				start: '2024-06-01',
				end: '2024-06-30',
				frequency: '每天',
				person: '张三'
			},
			...Array.from({ length: 9 }).map((_, i) => ({
				code: `PLAN00${i + 2}`,
				standard: `质检标准 ${i + 2}`,
				start: dayjs().add(i, 'day').format('YYYY-MM-DD'),
				end: dayjs().add(i + 7, 'day').format('YYYY-MM-DD'),
				frequency: ['每天', '每周', '每月'][i % 3],
				person: ['张三', '李四', '王五'][i % 3]
			}))
		])

		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增检验计划' : '编辑检验计划'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = planList.value.findIndex(p => p.code === row.code)
			} else {
				form.value = { code: '', standard: '', start: '', end: '', frequency: '', person: '' }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			const formatted = {
				...form.value,
				start: dayjs(form.value.start).format('YYYY-MM-DD'),
				end: dayjs(form.value.end).format('YYYY-MM-DD')
			}

			if (currentIndex.value >= 0) {
				planList.value[currentIndex.value] = formatted
			} else {
				planList.value.push(formatted)
			}

			dialogVisible.value = false
		}


		const deleteRow = (row) => {
			planList.value = planList.value.filter(p => p.code !== row.code)
		}

		return {
			planList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteRow
		}
	}
}
</script>

<style scoped>
.plan-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
